<template>
	<view>
		<download-btn :dwnSrc="dwnSrc"></download-btn>
		<GlobalSlot>
			<view slot="funcExampleDetail">
				<view class="content-box">
					<text>一般用法</text>
					<view class="example-body">
						<JkCountdown :day="1" :hour="1" :minute="12" :second="40" />
					</view>
					<text>不显示天数</text>
					<view class="example-body">
						<JkCountdown :show-day="false" :hour="52" :minute="12" :second="12" />
					</view>
					<text>文字分隔符</text>
					<view class="example-body">
						<JkCountdown :minute="30" :second="0" :show-colon="false" />
					</view>
					<text>修改字体颜色</text>
					<view class="example-body">
						<JkCountdown :day="1" :hour="2" :minute="30" :second="0" color="#ff3806"  :show-day="false"  />
					</view>
					<text>修改背景颜色</text>
					<view class="example-body">
						<JkCountdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" border-color="#007AFF" />
					</view>
					<text>修改文字大小</text>
					<view class="example-body">
						<JkCountdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" :fontSize="30" background-color="#007AFF" border-color="#007AFF" />
					</view>
					<text>倒计时回调事件</text>
					<view class="example-body">
						<JkCountdown :show-day="false" :second="10" @timeup="timeup" />
					</view>
					<text>传入时间戳</text>
					<view class="example-body">
						<JkCountdown :timestamp="timestamp" />
					</view>
				</view>
			</view>
			<view slot="funcIntroDetail">
				<p><label class="iconfont icon-pass"> </label>倒计时组件主要用于促销商品剩余时间，发送短信验证等待时间等场景</p>
			</view>
			<view slot="paramDetail">
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">color</view>
					<view class="col2">文字颜色</view>
					<view class="col3">string</view>
					<view class="col4">--</view>
					<view class="col5">#000000(黑色)</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">fontSize</view>
					<view class="col2">字体大小</view>
					<view class="col3">Number</view>
					<view class="col4">--</view>
					<view class="col5">24</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">day</view>
					<view class="col2">天数</view>
					<view class="col3">string</view>
					<view class="col4">--</view>
					<view class="col5">0</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">hour</view>
					<view class="col2">小时</view>
					<view class="col3">Number</view>
					<view class="col4">--</view>
					<view class="col5">0</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">minute</view>
					<view class="col2">分钟</view>
					<view class="col3">Number</view>
					<view class="col4">--</view>
					<view class="col5">0</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">second</view>
					<view class="col2">秒</view>
					<view class="col3">Number</view>
					<view class="col4">--</view>
					<view class="col5">0</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">timestamp</view>
					<view class="col2">时间戳</view>
					<view class="col3">Number</view>
					<view class="col4">--</view>
					<view class="col5">0</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">showDay</view>
					<view class="col2">是否显示天数</view>
					<view class="col3">Boolean</view>
					<view class="col4">true|false</view>
					<view class="col5">true</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">showColon</view>
					<view class="col2">是否以冒号为分隔符</view>
					<view class="col3">Boolean</view>
					<view class="col4">true|false</view>
					<view class="col5">true</view>
				</view>
				<view class="flexRowNoWrap param-table-row">
					<view class="col1">splitorColor</view>
					<view class="col2">割符号颜色</view>
					<view class="col3">String</view>
					<view class="col4">--</view>
					<view class="col5">#000000(黑色)</view>
				</view>
			</view>
			
			<view  slot="callFuncDetail">
				<view class="flexRowNoWrap param-table-row">
					<view class="col6">timeup</view>
					<view class="col7"></view>
					<view class="col8">倒计时时间到触发事件</view>
				</view>
			</view>
			
			<view slot="directorInfo">
				陈小曼  2021年03月04日
			</view>
			<view slot="versionInfo">
				----v1.0 陈小曼 2021年03月04日 完成组件基本功能
			</view>
			<view slot="projectName">
				湛江普惠商城
			</view>
			<view slot="terminalName">
				H5端、微信小程序端
			</view>
		</GlobalSlot>
		
		
	</view>
</template>
<script>
	import JkCountdown from '@/components/jk-countdown/jk-countdown';
	export default {
		data() {
			return {
				dwnSrc:'jk-countdown',
				testHour: 10,
				testMinute: 10,
				testSecond: 10,
				timestamp:1619649966
			}
		},
		created() {
			setTimeout(() => {
				this.testHour = 1
				this.testMinute = 1
				this.testSecond = 0
			}, 2000)
		},
		components: {
			JkCountdown
		},
		methods: {
			timeup() {
				uni.showToast({
					title: '时间到'
				})
			}
		}
	}
</script>

<style lang="scss">
	// @import '@/common/uni-nvue.scss';

	.example-body {
		padding: 10px;
	}
</style>
